<template>
  <el-tabs
    class="tabs"
    type="border-card"
    :value="activeTab"
    @tab-click="handleTabChange"
  >
    <el-tab-pane label="已发布" name="published">
      <el-card shadow="never">
        <div slot="header" class="filter">
          <el-form :inline="true" v-model="filter">
            <el-form-item label="分类">
              <el-select v-model="filter.category" placeholder="请选择">
                <el-option
                  v-for="(category, index) in categories"
                  :label="category.name"
                  :key="index"
                  :value="category.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签">
              <el-select v-model="filter.tag" placeholder="请选择">
                <el-option
                  v-for="(tag, index) in tags"
                  :label="tag.name"
                  :key="index"
                  :value="category.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="post-list" v-loading="loading">
          <div class="post-item" v-for="(item, index) in list" :key="index">
            <a :href="'/articles/' + item.author + '/' + item.id">
              <h3 class="title">{{ item.title }}</h3>
              <p class="abstract">{{ item.summary }}</p>
            </a>
            <div class="details">
              <span class="left">{{ format(item.createTime) }}</span>
              <div class="right">
                <span>
                  <router-link
                    :to="{
                      path: '/profile/editor',
                      query: { articleId: item.id },
                    }"
                  >
                    <span class="x-btn x-btn-mini">
                      <i class="el-icon-edit"></i>
                    </span>
                  </router-link>
                </span>
                <span
                  class="x-btn x-btn-mini x-bg-danger"
                  @click="deleteArticle(item.id)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="草稿箱" name="draft"> 草稿箱 </el-tab-pane>
    <el-pagination
      class="page-box"
      style="border: none"
      background
      layout="prev, pager, next"
      :hide-on-single-page="true"
      :total="total"
      :page-size="size"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </el-tabs>
</template>

<script>
import { parseTime } from "@/utils";
import request from "../../utils/request";

export default {
  data() {
    return {
      // 加载中
      loading: true,
      // 当前激活的标签页
      activeTab: "published",
      // 文章列表
      list: [
        {
          id: null,
          title: "",
          abstract: "",
          createTime: null,
        },
      ],
      // 总页数
      total: 0,
      // 当前页
      current: 1,
      // 每页条数
      size: 8,
      // 筛选条件
      filter: {
        category: null,
        tag: null,
      },
      // 所有类别
      categories: [],
      // 所有标签
      tags: [],
    };
  },
  methods: {
    getArticles(status) {
      request
        .get("/articles/mine", {
          params: {
            current: this.current,
            size: this.size,
            published: status,
          },
        })
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        });
    },
    format(time) {
      return parseTime(time);
    },
    deleteArticle(id) {
      this.$confirm("是否删除文章？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 确认删除，发送请求
          request.delete(`/articles/delete/${id}`).then(() => {
            // 提示删除成功
            this.$message({
              type: "success",
              message: "删除成功！",
              onClose: function() {
                this.$router.push("/profile/articleList");
              }
            });

            // for (let i = 0; i < this.list.length; ++i) {
            //   if (this.list[i].id == this.deleteId) {
            //     // 删除一条记录
            //     this.list.splice(i, 1);
            //     // 总记录数减一
            //     this.total--;

            //     break;
            //   }
            // }
          });
        })
        .catch(() => {
          // 取消删除提示
        });
    },
    handleCurrentChange(current) {
      this.current = current;
    },
    handleTabChange(tab) {
      this.activeTab = tab.name;
      this.getArticles(tab.name === "published");
      // console.log(this.activeTab);
    },
  },
  created() {
    this.getArticles(true);
  },
};
</script>

<style scope>
  .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover,
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #5fb878 !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .tabs {
    box-shadow: unset !important;
    border-radius: 4px;
  }
  .filter {
    text-align: left;
  }
  .filter .el-form-item {
    margin-bottom: unset;
  }

  .dialog-title {
    font-size: 18px;
    color: #5fb878;
  }
</style>